<template>
     <el-dialog :draggable=true :model-value="dialogVisible" title="请输入服务器信息" width="500"
                @close="handleClose">
      <template #footer>
        <div class="dialog-footer">
          <el-form
            ref="EditFormRef"
            :model="props.formData"
            class="demo-ruleForm"
            label-width="auto"
            status-icon
            style="max-width: 600px"
          >
            <el-form-item label="服务器地址" prop="serverIp">
              <el-input v-model="props.formData.serverIp" />
            </el-form-item>
            <el-form-item label="服务器端口" prop="port">
              <el-input v-model="props.formData.port" />
            </el-form-item>
            <el-form-item label="用户名" prop="serverUsername">
              <el-input v-model="props.formData.serverUsername" />
            </el-form-item>
            <el-form-item label="密码" prop="serverPassword">
              <el-input v-model="props.formData.serverPassword" type="password"/>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm(EditFormRef)">
                提交
              </el-button>
              <el-button @click="resetForm(EditFormRef)">
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </el-dialog>
   
  </template>
  
<script lang="ts" setup>
import {ref, defineProps ,defineEmits} from 'vue'
import type { FormInstance } from 'element-plus'
import {type ConnectServerInfo} from "@/type/webShell/connectServerInfo";
import {editConnectServerInfo} from "@/api/webShell/ServerList";


const emit = defineEmits(['update:dialogVisible', "close"])
const EditFormRef = ref<FormInstance>()

interface Props {
  formData: ConnectServerInfo;
  dialogVisible: boolean;
}

const props = defineProps<Props>();


function handleClose() {
  emit('update:dialogVisible', false)
  emit("close")
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log(props.formData)
      editConnectServerInfo(props.formData).then(res => {
        console.log(res)
        emit('update:dialogVisible', false)
        emit("close")
      })
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
 
  </script>